<template>
  <div class="app-container">
    <div class="treeWrap">
      <div v-loading="listLoading" class="treeWrapR">
        <el-tabs v-model="activeName" @tab-click="handleClick" ref="tabs">
          <!-- 0 -->
          <el-tab-pane label="企业信息" name="first-one" class="tableLine">
            <div v-loading="infoLoading" class="treeWrapL">
              <div style="text-align:right; padding-right:30px;">
                <el-button size="mini" icon="el-icon-edit" type="primary" plain @click="upCompany">
                  修改
                </el-button>
              </div>
              <div style="padding-bottom:20px;border-bottom:2px solid #ccc">
                <div class="tableTit">企业信息</div>
                <table width="100%" class="border-table">
                  <tr class="table-tr" height="30">
                    <td width="20%" class="bg-color">企业名称</td>
                    <td width="30%">{{ list.enterpriseName }}</td>
                    <td width="20%" class="bg-color">股票代码</td>
                    <td width="30%">{{ list.stockCode }}</td>
                  </tr>
                  <tr height="30">
                    <td class="bg-color">工商分类</td>
                    <td>有限责任公司</td>
                    <td class="bg-color">股票简称</td>
                    <td>{{ list.stockAbbreviation }}</td>
                  </tr>
                  <tr height="30">
                    <td class="bg-color">法人代表</td>
                    <td>{{ list.legalRepresentative }}</td>
                    <td class="bg-color">注册日期</td>
                    <td>{{ list.establishDate }}</td>
                  </tr>
                  <tr height="30">
                    <td class="bg-color">注册资本</td>
                    <td>{{ list.registeredCapital }}</td>
                    <td class="bg-color">员工总数</td>
                    <td>{{ list.staffNumber }}</td>
                  </tr>
                  <tr height="30">
                    <td class="bg-color">办公地址</td>
                    <td>{{ list.businessAddress }}</td>
                    <td class="bg-color">企业邮箱</td>
                    <td>{{ list.enterpriseEmail }}</td>
                  </tr>
                  <tr height="30">
                    <td class="bg-color">企业官网</td>
                    <td colspan="3">{{list.enterpriseWebsite}}</td>
                  </tr>
                  <tr height="30">
                    <td class="bg-color">公司简介</td>
                    <td colspan="3">{{ list.companyProfile }}</td>
                  </tr>
                  <tr height="30">
                    <td class="bg-color">经营范围</td>
                    <td colspan="3">{{ list.businessScope }}</td>
                  </tr>
                  <tr height="30">
                    <td class="bg-color">主要产品及业务描述</td>
                    <td colspan="3">{{ list.productDescribe }}</td>
                  </tr>
                  <tr height="30">
                    <td class="bg-color">所属行业</td>
                    <td colspan="3">待定</td>
                  </tr>
                </table>
              </div>
              <div v-show="seniorExecutiveVoList.length !== 0">
                <div class="tableTit">主要高管</div>
                <table width="100%" border="1" cellspacing="0">
                  <tr height="30">
                    <td width="50%" class="text-weight">姓名</td>
                    <td width="50%" class="text-weight">职位</td>
                  </tr>
                  <tr height="30" v-for="(item,index) in seniorExecutiveVoList " :key="index">
                    <td width="50%">{{item.name  }}</td>
                    <td width="50%">{{item.position }}</td>
                  </tr>
                </table>
              </div>
              <div v-show="shareholderVoList.length !== 0">
                <div class="tableTit">股东信息</div>
                <table width="100%" border="1" cellspacing="0">
                  <tr height="30">
                    <td width="50%" class="text-weight">发起人/企业</td>
                    <td width="50%" class="text-weight">股份占比</td>
                  </tr>
                  <tr height="30" v-for="(item,index) in shareholderVoList " :key="index">
                    <td width="50%">{{item.name}}</td>
                    <td width="50%">{{item.ratio}}</td>
                  </tr>
                </table>
              </div>
              <div v-show="supplierVoList.length !== 0">
                <div class="tableTit">供应商</div>
                <table width="100%" border="1" cellspacing="0">
                  <tr height="30">
                    <td width="50%" class="text-weight">股票代码</td>
                    <td width="50%" class="text-weight">企业全称</td>
                  </tr>
                  <tr height="30" v-for="(item,index) in supplierVoList " :key="index">
                    <td width="50%">{{item.stockCode}}</td>
                    <td width="50%">{{item.enterpriseName}}</td>
                  </tr>
                </table>
              </div>
              <div v-show="customerVoList.length !== 0">
                <div class="tableTit">服务商</div>
                <table width="100%" border="1" cellspacing="0">
                  <tr height="30">
                    <td width="50%" class="text-weight">股票代码</td>
                    <td width="50%" class="text-weight">企业全称</td>
                  </tr>
                  <tr height="30" v-for="(item,index) in customerVoList " :key="index">
                    <td width="50%">{{item.stockCode}}</td>
                    <td width="50%">{{item.enterpriseName}}</td>
                  </tr>
                </table>
              </div>
            </div>
          </el-tab-pane>
          <!-- 2 -->
          <el-tab-pane label="年度报告" name="second">
            <div class="filter-container">
              <div class="filter-content" :class="{ 'border-bottom': !moreSearchIf }">
                <div class="searchif" :class="{ height: moreSearchIf }">
                  <el-row>
                    <el-col :span="10">
                      <div class="search-item">
                        <label>报告类型：</label>
                        <!-- <el-input v-model="searchform.type" clearable placeholder="请输入类型" /> -->
                        <el-select
                          v-model="financialQurey.companyFinancialParamVo.reportType"
                          placeholder="请选择报告类型"
                        >
                          <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                      </div>
                    </el-col>
                    <el-col :span="10" class="mg-left-30">
                      <el-row>
                        <el-col :span="4"><div style="line-height:28px">报告时间：</div></el-col>
                        <el-col :span="20">
                          <el-date-picker
                            v-model="financialQureyTimes"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                          ></el-date-picker>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </div>
                <div class="btngroup">
                  <el-button
                    class="filter-item redBtn"
                    type="primary"
                    size="mini"
                    icon="el-icon-search"
                    @click="searchFinancial"
                  >
                    查询
                  </el-button>
                </div>
              </div>
              <div style="margin-top:10px">
                <el-button
                  size="mini"
                  icon="el-icon-edit"
                  type="primary"
                  plain
                  @click="maintainReport()"
                >
                  新增
                </el-button>
                <el-button size="mini" icon="el-icon-upload" type="primary" plain @click="Template">
                  导出模板
                </el-button>
                <el-button
                  size="mini"
                  icon="el-icon-folder-add"
                  type="primary"
                  plain
                  @click="Import"
                >
                  导入报告
                </el-button>
              </div>
            </div>
            <el-table
              v-loading="financialLoad"
              :data="treeData"
              header-cell-class-name="table-header-cell"
              border
              style="width: 100%;"
              class="treeTable"
            >
              <el-table-column label="报告类型" align="center">
                <template slot-scope="scope">
                  {{ scope.row.reportType | retype }}
                </template>
              </el-table-column>
              <el-table-column prop="reportPeriod" label="报告日期" />
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-dropdown trigger="click">
                    <span class="el-dropdown-link">更多</span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item divided @click.native="maintainReport(scope.row.id)">
                        修改
                      </el-dropdown-item>
                      <el-dropdown-item divided @click.native="showDetail(scope.row)">
                        详 情
                      </el-dropdown-item>
                      <el-dropdown-item divided @click.native="download(scope.row.id)">
                        下 载
                      </el-dropdown-item>
                      <el-dropdown-item divided @click.native="deleteMsg(scope.row.id)">
                        删 除
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-dialog :title="dialogTit" :visible.sync="isShow" class="tanDialog">
      <div class="dialogBox" v-loading="showDialogLoading">
        <div class="diaTitle">每股指标</div>
        <div class="perData">
          <div class="perData-line">
            <span class="left-str">基本每股收益</span>
            <span class="right-str">{{ perData.epsbasic }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">扣非每股收益</span>
            <span class="right-str">{{ perData.epsdiluted }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">稀释每股收益</span>
            <span class="right-str">{{ perData.epsexbasic }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">每股净资产</span>
            <span class="right-str">{{ perData.bps }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">每股净资产</span>
            <span class="right-str">{{ perData.capitalreserveps }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">每股未分配利润</span>
            <span class="right-str">{{ perData.undistributedps }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">每股经营现金流</span>
            <span class="right-str">{{ perData.cfps }}</span>
          </div>
        </div>
        <!-- ////    -->
        <div class="diaTitle">成长能力指标</div>
        <div class="perData">
          <div class="perData-line">
            <span class="left-str">营业收入</span>
            <span class="right-str">{{ growData.income }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">归属净利润</span>
            <span class="right-str">{{ growData.netProfit }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">扣非净利润</span>
            <span class="right-str">{{ growData.deductedProfit }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">营业收入同比增长</span>
            <span class="right-str">{{ growData.yoyIncome }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">归属净利润同比增长</span>
            <span class="right-str">{{ growData.yoyNetProfit }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">扣非净利润同比增长</span>
            <span class="right-str">{{ growData.yoyDedusctedProfit }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">加权净资产收益率</span>
            <span class="right-str">{{ growData.roewa }}</span>
          </div>
        </div>
        <!--  盈利能力指标 -->
        <div class="diaTitle">盈利能力指标</div>
        <div class="perData">
          <div class="perData-line">
            <span class="left-str">加权净资产收益率</span>
            <span class="right-str">{{ proData.roewa }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">摊薄净资产收益率</span>
            <span class="right-str">{{ proData.roediluted }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">销售毛利率</span>
            <span class="right-str">{{ proData.gpmargin }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">销售净利率</span>
            <span class="right-str">{{ proData.npmargin }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">实际税率</span>
            <span class="right-str">{{ proData.taxRate }}</span>
          </div>
        </div>
        <!--  运营能力指标 -->
        <div class="diaTitle">运营能力指标</div>
        <div class="perData">
          <div class="perData-line">
            <span class="left-str">总资产周转率(次)</span>
            <span class="right-str">5</span>
          </div>
          <div class="perData-line">
            <span class="left-str">应收账款周期(天)</span>
            <span class="right-str">55</span>
          </div>
          <div class="perData-line">
            <span class="left-str">存货周转天数(天)</span>
            <span class="right-str">30</span>
          </div>
        </div>
        <!--  资本结构和偿债能力指标 -->
        <div class="diaTitle">资本结构和偿债能力指标</div>
        <div class="perData">
          <div class="perData-line">
            <span class="left-str">资产负债率</span>
            <span class="right-str">{{ capData.debttoassets }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">流动负债/总负债</span>
            <span class="right-str">{{ capData.currentDebttodebt }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">流动比率</span>
            <span class="right-str">{{ capData.currentRatio }}</span>
          </div>
          <div class="perData-line">
            <span class="left-str">速动比率</span>
            <span class="right-str">{{ capData.quickRatio }}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getenterprise,
  findCompanyFinancialByParam,
  findCompanyFinancialDetailedById,
} from '@/api/Mycompany/index'
export default {
  filters: {
    retype(val) {
      if (val === 2) {
        return '一季报'
      } else if (val === 3) {
        return '中报'
      } else if (val === 4) {
        return '三季报'
      } else {
        return '年报'
      }
    },
    data_list(val) {
      if (val) {
        return val
      } else {
        return '--'
      }
    },
  },
  data() {
    return {
      listLoading: true,
      list: {
        enterpriseName: '', // 企业全称
        stockCode: '', // 股票代码
        stockAbbreviation: '', // 股票简称
        registeredCapital: '', // 注册资本
        provinceCity: '', // 省份城市
        generalManager: '', // 总经理
        legalRepresentative: '', // 法人代表
        boardSecretary: '', // 董事会秘书
        establishDate: '', // 成立日期
        companyProfile: '', // 公司简介
        enterpriseWebsite: '', // 企业官网
        enterpriseEmail: '', // 企业邮箱
        businessAddress: '', // 办公地址
        businessScope: '', // 经营范围
        staffNumber: '', // 总员工数
        productDescribe: '', // 主要产品及业务描述
        enterpriseCode: '', // 企业编号
      },
      detailedShow: false,
      detailedShowData: {},
      total: 0,
      paging: {
        pageNo: 1,
        pageSize: 4,
      },
      perData: {},
      growData: {},
      proData: {},
      capData: {},
      showDialogLoading: true,
      financialLoad: true,
      financialQurey: {
        companyFinancialParamVo: {
          endDate: '',
          reportType: 0,
          startDate: '',
        },
        id: this.$route.query.id,
      },
      financialQureyTimes: [],
      typeOptions: [
        { label: '全部', value: 0 },
        { label: '年报', value: 1 },
        { label: '一季报', value: 2 },
        { label: '中报', value: 3 },
        { label: '三季报', value: 4 },
      ],
      showSoket: false,
      infoLoading: false,
      classname: 'className',
      dialogTit: '',
      isShow: false,
      searchform: {
        name: '',
        time: '',
      },
      moreSearchIf: false,
      treeData: [],
      customerVoList: [], // 服务商 1
      supplierVoList: [], // 供应商 1
      shareholderVoList: [], // 股东 1
      holdingCompanyVoList: [], // 参控股公司
      seniorExecutiveVoList: [], // 董事会
      activeName: 'first-one',
    }
  },
  created() {
    this.getCompanyFinancial()
    this.getcompanyList()
  },
  mounted() {
    //   this.$nextTick(function () {
    //     this.BusinessRelations()
    //     this.drawPid()
    //   })
  },
  methods: {
    // 企业信息
    getcompanyList() {
      this.listLoading = true
      getenterprise().then(response => {
        console.log('企业信息', response)
        this.listLoading = false
        this.list = response.enterprisePo
        if (response.seniorExecutiveVoList !== null) {
          this.seniorExecutiveVoList = response.seniorExecutiveVoList
        } // 董事会
        if (response.customerVoList !== null) {
          this.customerVoList = response.customerVoList
        } // 服务商
        if (response.supplierVoList !== null) {
          this.supplierVoList = response.supplierVoList
        } // 供应商
        if (response.shareholderVoList !== null) {
          this.shareholderVoList = response.shareholderVoList
        } // 股东
        if (response.holdingCompanyVoList !== null) {
          this.holdingCompanyVoList = response.holdingCompanyVoList
        } // 参控股公司
      })
    },
    // 获取年度报告
    getCompanyFinancial() {
      this.financialLoad = true
      findCompanyFinancialByParam(this.financialQurey).then(res => {
        console.log('获取年度报告', res)
        this.treeData = res.records
        this.financialLoad = false
      })
    },
    // 查询对应的企业财务信息
    searchFinancial() {
      if (this.financialQureyTimes.length > 0) {
        this.financialQurey.companyFinancialParamVo.endDate = this.financialQureyTimes[1]
        this.financialQurey.companyFinancialParamVo.startDate = this.financialQureyTimes[0]
      }
      this.getCompanyFinancial()
    },
    // 获取财务报告的详细信息
    showDetail(row) {
      console.log(row)
      this.growData = {}
      this.proData = {}
      this.capData = {}
      this.perData = {}
      this.isShow = true
      this.showDialogLoading = true

      this.dialogTit = this.list.enterpriseName + row.reportPeriod + '年报'
      const findDetail = { id: row.id }
      findCompanyFinancialDetailedById(findDetail).then(res => {
        if (res.growthAbility.length > 0) {
          this.growData = res.growthAbility[0]
        }
        if (res.perShareIndex.length > 0) {
          this.perData = res.perShareIndex[0]
        }
        if (res.profitAbility.length > 0) {
          this.proData = res.profitAbility[0]
          console.log(this.proData)
        }
        if (res.capAbility.length > 0) {
          this.capData = res.capAbility[0]
          console.log(this.capData)
        }
        this.showDialogLoading = false
      })
    },
    handleClick(tab, event) {
      console.log(tab, event)
      if (tab.index === 3) {
        this.drawPid()
      }
    },
    // 点击分页
    handleCurrentChange(val) {
      this.listLoading = true
      this.paging.pageNo = val
      // this.getList() // 初始化文件
    },
    upCompany() {
      this.$router.push({
        path: '/maintain/updatecompany',
      })
    },
    //  新增修改报告 id 有值 修改  没有值 新增
    maintainReport(id) {
      console.log(id)
      this.$router.push({
        path: '/maintain/AnnualReport',
        query: {
          id: id,
        },
      })
    },
    Template() {
      console.log('导出模板')
    },
    Import() {
      console.log('导出')
    },
    download(id) {
      console.log('下载pdf年报', id)
    },
    deleteMsg(id) {
      console.log('删除年报记录', id)
    },
  },
}
</script>
<style lang="scss">
.line-echarts {
  width: vw(500px);
  height: vw(300px);
}
.treeTable {
  td,
  th {
    padding: 5px 0;
  }
}
.tanDialog {
  td,
  th {
    padding: 5px 0;
  }
  .el-dialog__body {
    padding-top: 0;
  }
}
.treeWrapR {
  .el-tabs {
    width: 100%;
    height: 100%;
    .el-tabs__content {
      width: 100%;
      height: 89%;
      .el-tab-pane {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@import '@/child-business/styles/search-box.scss';
@import '@/child-business/styles/tree-box.scss';
.echartBox {
  position: relative;
  width: vw(1502px);
  height: vh(650px);
  margin-top: 1vh;
  .echartElement {
    width: vw(1500px);
    height: vh(649px);
  }
}
.dialogBox {
  max-height: 650px;
  overflow: auto;
}
.perData {
  width: 100%;
  border: 1px solid #aaa;
  border-radius: 4px;
  .perData-line {
    width: 100%;
    line-height: 36px;
    height: 36px;
    font-size: 14px;
    border-bottom: 1px solid #aaa;
    .left-str {
      padding-left: 20px;
      box-sizing: border-box;
      width: 49%;
      float: left;
      border-right: 1px solid #aaa;
      height: 36px;
    }
    .right-str {
      padding-left: 20px;
      box-sizing: border-box;
      width: 49%;
      float: left;
      height: 36px;
    }
  }
  .perData-line:last-child {
    border-bottom: none;
  }
}
.lineBar {
  display: flex;
  width: 100%;
  height: 100%;
  .margin-box {
    height: 590px;
    overflow-y: auto;
  }
  .left-box {
    flex: 2;
    border-right: 5px solid #ccc;
    padding-right: 10px;
  }
  .left-box-once {
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    margin-top: 20px;
    padding: 0 30px;
    cursor: pointer;
  }
  .left-box-title {
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 16px;
      color: #444;
      margin-bottom: 20px;
    }
    .time {
      color: #909399;
    }
  }
  .content {
    line-height: 20px;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-indent: 30px;
    color: #666;
    max-height: 100px;
    font-size: 13px;
    margin-bottom: 20px;
  }
}
.diaTitle {
  width: 100%;
  margin: 15px 0;
  font-size: 16px;
  font-weight: 600;
}
.cell {
  .el-link.el-link--primary {
    color: #409eff;
  }

  .el-link.el-link--primary:hover {
    color: #40afff;
  }

  .el-link.el-link--danger {
    color: #d12f1f;
  }

  .el-link.el-link--danger:hover {
    color: #e23f1f;
  }

  .upStr {
    width: 46px;
    text-align: center;
  }

  .line {
    width: 20px;
    color: #aaa;
    text-align: center;
  }
}

.tableLine {
  height: 100%;
}
.el-table td,
.el-table th {
  padding: 5px 0;
}

.app-container {
  height: 100%;
}
.tableTit {
  width: 100%;
  margin: 15px 0 5px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.treeTable {
  width: 100%;
}

.treeWrap {
  display: flex;
  height: 100%;
  padding: 25px;
  font-size: 14px;
  background: #fff;
  border-radius: 4px;
  justify-content: space-between;

  .treeWrapL {
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    overflow-y: auto;
    table {
      border-collapse: collapse;
      border: none;
      td {
        border: 1px solid #aaa;
        padding-left: 15px;
        color: #333;
      }
    }
  }
  .treeWrapR {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 15px 10px;
    overflow: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    .el-tabs {
      width: 100%;
      height: 100%;

      .el-tabs__content {
        width: 100%;
        height: 89%;

        .el-tab-pane {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .strLeft {
    float: left;
    width: 30%;
    height: 32px;
    text-align: left;
  }

  .strRight {
    float: left;
    width: 70%;
    height: 32px;
    text-align: right;
  }
}
.bg-color {
  background-color: #ccc;
  font-weight: 600;
}
.text-weight {
  font-weight: 600;
}
::v-deep .el-dropdown-link {
  color: #409eff;
  cursor: pointer;
}
</style>
